<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>zui</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div id="page" class="">
        
        <div id="pageBody" class="scrollbar-hover">
            <div class="container">
                <div id="pageContent">
                    <section>
                        <header>
                            <h3>隔行交替样式</h3>
                        </header>
                        <article>
                            <div class="example">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Sunshine</td>
                                            <td>Sunday</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Sunday</td>
                                            <td>Sunshine</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>catouse</td>
                                            <td>azhi</td>
                                            <td>zenUI</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>God</td>
                                            <td>Lady Gaga</td>
                                            <td>catouse</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>




                    <section>
                        <header>
                            <h3>响应鼠标悬停</h3>
                        </header>
                        <article>
                            <div class="example">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Sunshine</td>
                                            <td>Sunday</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Sunday</td>
                                            <td>Sunshine</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>catouse</td>
                                            <td>azhi</td>
                                            <td>zenUI</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>God</td>
                                            <td>Lady Gaga</td>
                                            <td>catouse</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                          
                        </article>
                    </section>



                    <section>
                        <header>
                            <h3>带所有边框的表格</h3>
                        </header>
                        <article>
                            <div class="example">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Sunshine</td>
                                            <td>Sunday</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Sunday</td>
                                            <td>Sunshine</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>catouse</td>
                                            <td>azhi</td>
                                            <td>zenUI</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>God</td>
                                            <td>Lady Gaga</td>
                                            <td>catouse</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>



                    <section>
                        <header>
                            <h3>不带边框的表格</h3>
                        </header>
                        <article>
                            <div class="example">
                                <table class="table table-borderless">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Sunshine</td>
                                            <td>Sunday</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>Sunday</td>
                                            <td>Sunshine</td>
                                            <td>catouse</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>catouse</td>
                                            <td>azhi</td>
                                            <td>zenUI</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>God</td>
                                            <td>Lady Gaga</td>
                                            <td>catouse</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>





                    <section>
                        <header>
                            <h3>自动宽度的表格</h3>
                        </header>
                        <article>
                            <div class="example">
                                <table class="table table-auto">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>catouse</td>
                                            <td>hello</td>
                                            <td>world</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>jay</td>
                                            <td>thks</td>
                                            <td>jajaja</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>JK row</td>
                                            <td>thks</td>
                                            <td>Pa</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>




                    <section>
                        <header>
                            <h3>更为紧凑的表格</h3>
                        </header>
                        <article>
                            <div class="example">
                                <table class="table table-condensed">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>catouse</td>
                                            <td>hello</td>
                                            <td>world</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>jay</td>
                                            <td>thks</td>
                                            <td>jajaja</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>JK row</td>
                                            <td>thks</td>
                                            <td>Pa</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>






                    <section>
                        <header>
                            <h3>固定布局的表格</h3>
                        </header>
                        <article>
                            <p>在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。</p>
                            <div class="example">
                                <table class="table table-fixed">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Username</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>catouse</td>
                                            <td>hello</td>
                                            <td>world</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>jay</td>
                                            <td>thks</td>
                                            <td>jajaja</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>JK row</td>
                                            <td>thks</td>
                                            <td>Pa</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>




                    <section>
                        <header>
                            <h3>色彩主题</h3>
                        </header>
                        <article>
                            <p>可以根据语义标记整行或者某一单元格</p>
                            <div class="example">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>描述</th>
                                            <th>Payment Taken</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="success">
                                            <td>1</td>
                                            <td>表示成功或积极的行为。</td>
                                            <td>01/04/2012</td>
                                            <td>Approved</td>
                                        </tr>
                                        <tr class="danger">
                                            <td>2</td>
                                            <td>表示一个危险或存有潜在危险的行为。</td>
                                            <td>02/04/2012</td>
                                            <td>Declined</td>
                                        </tr>
                                        <tr class="warning">
                                            <td>3</td>
                                            <td>表示警告，可能需要注意。</td>
                                            <td>03/04/2012</td>
                                            <td>Pending</td>
                                        </tr>
                                        <tr class="active">
                                            <td>4</td>
                                            <td>标记为激活行。</td>
                                            <td>04/04/2012</td>
                                            <td>Call in to confirm</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </article>
                    </section>
                </div>
                <nav></nav>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>